import {useState,useEffect} from "react";
import axios from 'axios'
import './manage.css'
import * as echarts from "echarts";
export default function Manage(){

let [user,setUser] = useState()
let [order,setOrder]= useState()
let [admin,setAdmin]= useState()
let [users,setUsers] = useState()
let [orders,setOrders]= useState()
let [admins,setAdmins]= useState()
let userPromise   =[]
let orderPromise   =[]
let adminPromise   =[]
var days =[]
var date = new Date()
var d =date.getFullYear()+'-'+(date.getMonth()+1)+'-'+(date.getDate()<10?'0'+date.getDate():date.getDate()) 
 days.unshift(d)
 for(let i=0;i<6;i++){
  date.setDate(date.getDate()-1)
  var d =date.getFullYear()+'-'+(date.getMonth()+1)+'-'+(date.getDate()<10?'0'+date.getDate():date.getDate()) 
 days.unshift(d)
 }
 var news =date.getFullYear()+'-'+(date.getMonth()+1)+'-'+(date.getDate()<10?'0'+date.getDate():date.getDate()) 
console.log(date.getDate());
 useEffect(()=>{
  days.forEach(i => {
    var puser = new Promise((resolve, reject) => {
        axios.get('https://elm.cangdu.org/statis/user/' + i + '/count').then(res => {
            if (res.data.status == 1) {
                resolve(res.data.count)
            }
        }).catch((error) => {
            reject(error)
        })
    })
    userPromise.push(puser)
    var porder = new Promise((resolve, reject) => {
        axios.get('https://elm.cangdu.org/statis/order/' + i + '/count').then(res => {
            if (res.data.status == 1) {
                resolve(res.data.count)
            }
        }).catch((error) => {
            reject(error)
        })
    })
    orderPromise.push(porder)
    var padmin = new Promise((resolve, reject) => {
        axios.get('https://elm.cangdu.org/statis/admin/' + i + '/count').then(res => {
            if (res.data.status == 1) {
                resolve(res.data.count)
            }
        }).catch((error) => {
            reject(error)
        })
    })
    adminPromise.push(padmin)
})
Promise.all([...userPromise, ...orderPromise, ...adminPromise]).then(res => {
    myChart.setOption({
        series: [
            {
                name: '新注册用户',
                type: 'line',
                stack: 'Total',
                data: res.slice(0, 7)
            },
            {
                name: '新增订单',
                type: 'line',
                stack: 'Total',
                data: res.slice(7, 14)
            },
            {
                name: '新增管理员',
                type: 'line',
                stack: 'Total',
                data: res.slice(14)
            },
        ]
    })
})
  axios.get('https://elm.cangdu.org/statis/user/'+news+'/count').then(res=>{
          // console.log(res);
          if(res.data.status==1){
            setUser(res.data.count)
          }
  })
  axios.get('https://elm.cangdu.org/v1/users/count').then(res=>{
          // console.log(res);
          if(res.data.status==1){
            setUsers(res.data.count)
          }
  })
  axios.get('https://elm.cangdu.org/statis/order/'+news+'/count').then(res=>{
    // console.log(res);
    if(res.data.status==1){
      setOrder(res.data.count)
    }
})
axios.get('https://elm.cangdu.org/bos/orders/count').then(res=>{
    // console.log(res);
    if(res.data.status==1){
      setOrders(res.data.count)
    }
})
axios.get('https://elm.cangdu.org/statis/admin/'+news+'/count').then(res=>{
    // console.log(res);
    if(res.data.status==1){
      setAdmin(res.data.count)
    }
})
axios.get('https://elm.cangdu.org/admin/count').then(res=>{
    // console.log(res);
    if(res.data.status==1){
      setAdmins(res.data.count)
    }
})
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
  title: {
    text: '走势图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['新注册用户', '新增订单', '新增管理员']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data:days
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '新注册用户',
      type: 'line',
      stack: 'Total',
      data:[]
    },
    {
      name: '新增订单',
      type: 'line',
      stack: 'Total',
      data:[]
    },
    {
      name: '新增管理员',
      type: 'line',
      stack: 'Total',
      data:[]
    },
  ]
};
 myChart.setOption(option);
},[])
        return <div >
            <header className="section_title">数据统计</header>
            <div className="el-row ele" >
              <div className="el-col el-col-4" >
                <div className="data_list today_head"><span className="data_num head">当日数据：</span></div>
              </div>
              <div className="el-col el-col-4" >
                <div className="data_list"><span className="data_num">{user}</span> 新增用户</div>
              </div>
              <div className="el-col el-col-4" >
                <div className="data_list"><span className="data_num">{order}</span> 新增订单</div>
              </div>
              <div className="el-col el-col-4" >
                <div className="data_list"><span className="data_num">{admin}</span> 新增管理员</div>
              </div>
            </div>
            <div className="el-row" >
            <div className="el-col el-col-4" >
                <div className="data_list all_head"><span className="data_num head">总数据：</span></div>
            </div>
            <div className="el-col el-col-4" >
                <div className="data_list"><span className="data_num">{users}</span> 注册用户</div>
            </div>
            <div className="el-col el-col-4" >
                <div className="data_list"><span className="data_num">{orders}</span> 订单</div>
            </div>
            <div className="el-col el-col-4" >
                <div className="data_list"><span className="data_num">{admins}</span> 管理员</div>
            </div>
          </div>
         <div className="a">
         <div id="main"></div>
         </div>
        </div>
  
}
